import styled from "styled-components"
import Svg, { SvgComponent } from "@/components/base/Svg"
const FollowContainer = styled.div`
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12rem;
    margin-top: 24rem;
`
const FollowItem = styled.div`
    border-radius: 8rem;
    padding: 12rem;
    background-color: #ffffff;
    display: grid;
    align-items: center;
    grid-template-columns: 24rem 1fr 24rem;
    gap: 12rem;
    margin-left: 16rem;
    margin-right: 16rem;
`

const FollowIcon = styled.div`
    width: 24rem;
    height: 24rem;
    & svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
`
const FollowTitle = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 16rem;
    letter-spacing: 0%;
`

const FollowRightArrow = styled(SvgComponent("pages/UserCenterPage/right_arrow1.svg"))`
    width: 24rem;
    height: 24rem;
`

export default function Followus() {
    const icons = [
        { icon: "pages/UserCenterPage/icon_facebook.svg", title: "Official Facebook Page" },
        { icon: "pages/UserCenterPage/icon_facebook.svg", title: "Facebook Group (Private)" },
        { icon: "pages/UserCenterPage/icon_instagram.svg", title: "Official Instagram" },
        { icon: "pages/UserCenterPage/icon_X.svg", title: "X (Twitter)" },
        { icon: "pages/UserCenterPage/icon_tk.svg", title: "TikTok" },
        { icon: "pages/UserCenterPage/icon_telegram.svg", title: "Official Telegram" },
        { icon: "pages/UserCenterPage/icon_viber.svg", title: "Official Viber Bot" },
    ] as const

    return (
        <FollowContainer>
            {icons.map(({ icon, title }, index) => (
                <FollowItem>
                    <FollowIcon key={index}>
                        <Svg src={icon} />
                    </FollowIcon>

                    <FollowTitle>{title}</FollowTitle>

                    <FollowRightArrow />
                </FollowItem>
            ))}
        </FollowContainer>
    )
}
